// 存放路由相关的代码

import Vue from 'vue';

// 01:引入下载好的路由插件 vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// @符号在项目的webpack默认配置中已经配置好了 @ 表示 src 目录
import Home from '@/views/Home';
import Category from '@/views/Category';
import Car from '@/views/Car';
import Mine from '@/views/Mine';
import Notfind from '@/views/Notfind'
import User1 from '@/views/User1'
import User2 from '@/views/User2'
import Login from '@/views/Login'


// 02: 创建路由规则
// 注意: 404路由写在当前所有的路由规则最下方
// 注意: 二级路由的path 不能加 '/' 否则就会被认为是一级路由
const routes = [
    { path: '/', redirect: '/home' }, // 路由重定向
    { path: '/home/:id?', component: Home, name: 'home' },
    { path: '/category', component: Category, name: 'category' },
    {
        path: '/car',
        component: Car,
        name: 'car',
        // 路由独享守卫
        // beforeEnter: (to, from, next) => {
        //     // 表示进入到当前路由之前
        //     console.log(from);
        //     if (from.path == '/mine') {
        //         next()
        //     } else {
        //         next(false)
        //     }
        // }
    },
    // { path: '/mine', redirect: '/mine/user1' },
    {
        path: '/mine',
        // redirect: '/mine/user1',
        component: Mine,
        name: 'mine',
        children: [{
                path: 'user1',
                component: User1
            },
            {
                path: 'user2',
                component: User2
            }
        ]
    },
    { path: '/login', component: Login },
    { path: '*', component: Notfind, name: 'notfind' }
]

//03: 创建路由对象,将路由规则传给路由对象
// 注意:在vue中 有3中路由模式 分别 hash 模式, history 模式, 默认为hash (#/mine就是hash值)
// hash 模式" 通过监听url地址中hash 值的改变,来显示对应的组件
// history 模式,特点: 没有hash# , 美观, 当项目上线后,直接访问地址,会出现404报错 ,实现原理是history.pushState()方法实现的路由 
// 注意:使用history模式,需要后端做一个404重定向配置,这样上线后才不会出现404报错
const router = new VueRouter({
    mode: 'history', // 设置当前的路由模式为 history
    routes: routes
});

// 如下代码结局路由重复 点击报错问题 这个报错是vue-router 3.X 报错,4.x 该报错没有啦
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
};

// console.log('mainjs', router);
// 04: 将路由对象挂载道根实例上,这样每一个子组件的实例对象都可以放访问根实例上的路由规则


// 添加路由全局前置守卫
// 定义: 当前路由从A页面跳转到B页面时,被我拦截,我先判断是否满足跳转的条件,满足就放行,否则不放行
// 全局守卫表示整个项目的路由都会触发这个函数beforeEach
// router.beforeEach((to, from, next) => {
//     // to 下一个路由对象
//     // from : 上一个路由对象
//     // next: 放行函数
//     // console.log(to, from, next);

//     // 判断如果用户登录放行,否则未登录就跳转到登录页'
//     const username = localStorage.getItem('username');
//     if (username) {
//         // 人家已登录,直接放行
//         next()
//     } else if (!username && to.path != '/login') {
//         // 说明未登录 且 跳转的是 非登录页(首页,分页,购物车.我的)
//         // 重定向到登录页
//         next('/login')
//     } else {
//         // 说明未登录 且跳转的是登录页
//         next()
//     }

// })



//导出 路由实例对象
export default router